<!--
 * @author wangpeizhi
 -->
<template>
  <div class="quescollect-detail">
    <el-collapse-transition>
      <div v-show="searchshow" class="common-search merge">
        <span class="svg-container">
          <svg-icon icon-class="search" />
        </span>
        <el-input
          v-model.trim="search.question"
          clearable
          placeholder="请输入题干搜索"
          class="search-input"
          @keyup.enter.native="handleFilter"
        />
        <div class="common-search-btn">
          <el-button
            class="filter-item"
            type="primary"
            @click="handleFilter"
          >{{ $t('table.search') }}</el-button>
          <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
          <span class="common-search-more" @click="searchshow = !searchshow">
            更多筛选条件
            <i class="el-icon-arrow-down" />
          </span>
        </div>
      </div>
    </el-collapse-transition>
    <el-collapse-transition>
      <div v-show="!searchshow" class="common-search separate">
        <div class="common-search-inner">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">题干</div>
                <el-input v-model.trim="listQuery.stem" style="width: 90%" class="filter-item" placeholder="请输入题干名称搜索" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">答案</div>
                <el-input v-model.trim="listQuery.answer" style="width: 90%" class="filter-item" placeholder="请输入名称搜索" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">审核结果</div>
                <el-select v-model="listQuery.auditResult" placeholder="请选择审核结果" style="width: 80%">
                  <el-option
                    v-for="(item, index) in dict.AUDITRESULT"
                    :key="index"
                    :label="item.dictName"
                    :value="item.dictValue"
                  />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="common-search-btn">
          <el-button type="primary" @click="handleFilter">{{ $t('table.search') }}</el-button>
          <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
          <span class="common-search-more" @click="searchshow = !searchshow">
            精简筛选条件
            <i class="el-icon-arrow-up" />
          </span>
        </div>
      </div>
    </el-collapse-transition>
    <div class="btn-container">
      <div class="btn-title">
        <span>试题征集管理</span>
      </div>
      <div class="btn-btns">
        <!--        <el-button style="margin-left: 10px;" @click="handleChecks">批量审核</el-button>-->
        <!-- <el-button style="margin-left: 10px;" @click="handleDistribution">分配题库</el-button> -->
<!--        <el-button style="margin-left: 10px;" @click="handleDeletes">批量删除</el-button>-->
      </div>
    </div>
    <div class="table">
      <el-table
        ref="rolemantable"
        v-loading="listLoading"
        :data="list"
        tag="stsh"
        class="tableScope"
        style="width: 100%"
        :header-cell-style="rowClass"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="stem" label="题干" show-overflow-tooltip />
        <el-table-column prop="questionTypeValue" label="试题类型" width="100" show-overflow-tooltip />
        <el-table-column prop="verifyStatus" label="审核状态" width="100" show-overflow-tooltip />
        <el-table-column prop="userName" label="出题人" width="100" show-overflow-tooltip />
        <el-table-column prop="crtTime" label="出题时间" width="200" show-overflow-tooltip />
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="handleCheck(scope.row,scope.$index)"
            >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <el-dialog
      :visible.sync="checkDialogVisible"
      title="试题审核"
      center
      width="450px"
      top="25vh"
      @close="closecheckDialogVisible"
    >
      <el-form
        ref="baseform"
        :model="baseform"
        label-width="80px"
        label-position="left"
        class="edit-ques-form"
      >
        <el-form-item label="试题类型">
          <el-input v-model="baseform.questionTypeValue" type="text" readonly />
        </el-form-item>
        <el-form-item label="试题难度" prop="difficultyId">
          <el-input v-model="baseform.questionLevelValue" type="text" readonly />
        </el-form-item>
        <el-form-item label="题干" prop="question">
          <el-input v-model="baseform.stem" row="3" type="textarea" readonly />
        </el-form-item>
        <!--单选题-->
        <div v-if="answerType == '10'">
          <div class="title" style="margin-bottom: 15px">
            选择项
            <span>（正确选项 单、多选题的选项范围从2到8）</span>
          </div>
          <el-form-item
            v-for="(item, index) in opts"
            :key="item.key"
            :label="answerMap[index]"
            label-width="35px"
            class="answer"
          >
            <el-input
              :value="item"
              readonly
              style="width: 92%"
            />
          </el-form-item>
          <el-form-item label="正确答案" prop="rightanswer">
            <el-radio-group :value="baseform.rightanswer">
              <el-radio
                v-for="(item, index) in opts"
                :key="item.key"
                disabled
                :label="item"
              >{{ answerMap[index] }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <!-- 选择项（正确选项 单、多选题的选项范围从2到8）-->
        <div v-if="answerType == '20'">
          <div class="title" style="margin-bottom: 15px">
          </div>
          <el-form-item
            v-for="(item, index) in opts"
            :key="item.key"
            :label="answerMap[index]"
            label-width="35px"
            class="answer"
          >
            <el-input
              :value="item"
              readonly
              style="width: 92%"
            />
          </el-form-item>
          <el-form-item label="正确答案" prop="rightanswerCheck">
            <el-checkbox-group v-model="baseform.rightanswerCheck">
              <el-checkbox
                v-for="(answer, index) in opts"
                :key="answer.key"
                disabled
                :label="answer"
              >
                {{
                  answerMap[index] }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <!--判断题-->
        <div v-if="answerType == '30'">
          <el-form-item label="正确答案" prop="rightanswer">
            <el-radio-group v-model="baseform.rightanswer" disabled>
              <el-radio label="对">正确</el-radio>
              <el-radio label="错">错误</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <!--填空题-->
        <div v-if="answerType == '40'">
          <el-form-item label="正确答案" prop="rightanswer">
            <el-input :value="baseform.rightanswer" disabled/>
          </el-form-item>
        </div>
        <!--简答题-->
        <div v-if="answerType == '50'">
          <el-form-item label="正确答案" prop="rightanswer">
            <el-input
              :value="baseform.rightanswer"
              disabled
              :rows="4"
              type="textarea"
              placeholder="请输入主观题答案"
            />
          </el-form-item>
        </div>
        <el-form-item label="审核说明 :">
          <el-input v-model="auditExplain" :rows="2" type="textarea" placeholder="请输入说明" />
        </el-form-item>
        <el-form-item v-if="!isedit" label="分配题库:">
          <span v-if="clickTree.question" class="quesClassify-data">{{ clickTree.question }}</span>
          <span class="quesClassify" @click="handleSelCfy">选择题库</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-loading.fullscreen.lock="fullscreenLoading"
          style="padding: 8px 30px;"
          @click="passthrough(2)"
        >跳 过</el-button>
        <el-button
          v-if="!isedit"
          style="padding: 8px 30px;"
          type="primary"
          @click="passthrough(1)"
        >（通过）下一题</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="tkfpDialogVisible" title="分配题库" center width="450px" top="25vh">
      <div class="check-con">
        <el-form label-position="left" label-width="80px" style="width: 100%;">
          <el-form-item label="分配题库:">
            <span v-if="clickTree.question" class="quesClassify-data">{{ clickTree.question }}</span>
            <span class="quesClassify" @click="handleSelCfy">选择题库</span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="tkfpDialogVisible = false">取 消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="tkfpSubmit()">确 认</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="qcDialogVisible" title="试题分类" center width="450px" top="20vh">
      <div class="classify-tree-con">
<!--        <el-input v-model.trim="filterText" placeholder="输入关键字进行过滤" />-->
        <el-tree
          ref="qctree"
          :data="qctreedata"
          :props="defaultProps"
          accordion
          @node-click="handleNodeClick">
          <template v-slot="{ node, data }">
            <!-- 自定义节点的内容 -->
            <span>{{ data.classifyName }}</span>
          </template>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          style="padding: 8px 30px;"
          @click="qcDialogVisible = false"
        >{{ $t('table.cancel') }}</el-button>
        <el-button
          style="padding: 8px 30px;"
          type="primary"
          @click="subQuesCfy"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {queryPage, review, getDictByCode} from '../api/index'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getClassifyTree } from '../api/question'

export default {
  name: 'CollectDetail',
  components: { Pagination },
  directives: { waves },
  filters: {
    quesType(type) {
      if (type === 1) {
        return '单选题'
      } else if (type === 2) {
        return '多选题'
      } else if (type === 3) {
        return '判断题'
      } else if (type === 4) {
        return '填空题'
      } else if (type === 5) {
        return '主观题'
      }
    },
    quesVerifyStatus(type) {
      if (type === 0) {
        return '未审核'
      } else if (type === 1) {
        return '通过'
      } else if (type === 2) {
        return '不通过'
      }
    }
  },
  data() {
    return {
      styleId: '',
      searchshow: true,
      treeloading: false,
      total: 0,
      filterText: '',
      skipPage: 2,
      fullscreenLoading: false,
      search: {
        question: ''
      },
      listQuery: {
        page: 1,
        limit: 10,
        stem: '',
        answer: '',
        auditResult: ''
      },
      isedit: false,
      list: [
        {
          name: '题干',
          type: '试题类型',
          realName: '出题人',
          entNmae: '出题人',
          beginTime: '出题时间'
        }
      ],
      listLoading: false,
      multipleSelection: [],
      checkDialogVisible: false,
      tkfpDialogVisible: false,
      baseform: {
        type: 3,
        classifyId: '',
        difficultyId: '1000',
        question: '',
        answer: '',
        useType: 1,
        rightanswer: '',
        rightanswerCheck: [],
        quesAnalysis: ''
      },
      answerMap: {
        0: 'A',
        1: 'B',
        2: 'C',
        3: 'D',
        4: 'E',
        5: 'F',
        6: 'G',
        7: 'H'
      },
      opts: [],
      answerType: '1',
      clickTree: {},
      qcDialogVisible: false,
      qctreedata: [],
      defaultProps: {
        children: 'children',
        label: 'classifyName'
      },
      dict: {
        AUDITRESULT: []
      },
      auditExplain: '', // 审核说明
      classifyId: ''    // 题库id
    }
  },
  watch: {
    filterText(val) {
      this.$refs.qctree.filter(val)
    }
  },
  created() {
    for (const i in this.dict) {
      this.getDict(i)
    }
    this.collectId = this.$route.query.id
    this.getList()
    this.loadTree()
  },

  methods: {
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code)
          .then(response => {
            this.dict[code] = response.data.data[0].list
            resolve()
          })
          .catch(error => {
            reject(error)
          })
      })
    },
    // 获取列表
    getList(obj) {
      this.listLoading = true
      const query = {
        page: this.listQuery.page,
        pageSize: this.listQuery.limit,
        recordId: this.collectId,
        stem: this.search.question
      }
      if (!this.searchshow) {
        query['stem'] = this.listQuery.stem
        query['answer'] = this.listQuery.answer
        query['auditResult'] = this.listQuery.auditResult
      }
      return new Promise((resolve, reject) => {
        queryPage(query).then(response => {
          this.skipPage = this.listQuery.page * this.listQuery.limit - this.listQuery.limit + 2
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
          this.list = this.list.map(item=>{
            return {
              ...item,
              verifyStatus: this.dict.AUDITRESULT.find(item2 => item2.dictValue.toString() === item.auditResult.toString()).dictName
            }
          })
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    },

    /**
     * 列表审核按钮
     */
    handleCheck(row, index) {
      this.skipPage = this.skipPage + index
      this.checkDialogVisible = true
      this.$nextTick(() => {
        row.answerValue = JSON.parse(row.answer).answers ? JSON.parse(row.answer).answers.join('、') : ''
        row.optsValue = JSON.parse(row.answer).opts ? JSON.parse(row.answer).opts.join(',').split(',') : ''
        row.questionTypeValue = this.typeJudg(row.questionType)
        this.baseform = row
        this.clickTree['id'] = row.classifyId
        this.clickTree['question'] = row.classifyName
        this.isedit = row.auditResult == 'AUDITRESULT02' ? true : false
        this.setAnswers(row.answer)
      })
    },
    // 试题类型判断
    typeJudg(item) {
      let chineseText
      switch (item) {
        case '10':
          chineseText = '单选'
          break
        case '20':
          chineseText = '多选'
          break
        case '30':
          chineseText = '判断'
          break
        case '40':
          chineseText = '填空'
          break
        case '50':
          chineseText = '简答'
          break
      }
      return chineseText
    },
    /*
    * 过滤试题
    * */
    setAnswers(str) {
      var t = window.JSON.parse(str)
      this.answerType = t.type
      this.opts = t.opts
      if (t.type === '10') {
        this.baseform.rightanswer = t.answers[0]
      } else if (t.type === '20') {
        this.baseform.rightanswerCheck = t.answers
      } else {
        this.baseform.rightanswer = t.answers[0]
      }
    },
    /*
    * 通过&下一题 2：跳过，1：下一题
    * */
    passthrough(val) {
      const params = {
        id: this.baseform.id,
        classifyId: this.classifyId,
        auditResult: '',
        auditExplain: this.auditExplain
      }
      if (val === 2) {
        this.fullscreenLoading = true
        params.auditResult = 'AUDITRESULT01'
        return new Promise((resolve, reject) => {
          const query = {
            page: this.skipPage,
            pageSize: 1,
            recordId: this.collectId,
            stem: this.search.question
          }
          if (!this.searchshow) {
            query['stem'] = this.listQuery.stem
            query['answer'] = this.listQuery.answer
            query['auditResult'] = this.listQuery.auditResult
          }
          queryPage(query).then(response => {
            if (response.data.data.rows.length > 0) {
              this.fullscreenLoading = false
              this.skipPage++
              this.$nextTick(() => {
                const row = response.data.data.rows[0]
                row.answerValue = JSON.parse(row.answer).answers ? JSON.parse(row.answer).answers.join('、') : ''
                row.optsValue = JSON.parse(row.answer).opts ? JSON.parse(row.answer).opts.join(',').split(',') : ''
                row.questionTypeValue = this.typeJudg(row.questionType)
                this.baseform = row
                this.clickTree['id'] = row.classifyId
                this.clickTree['question'] = row.classifyName
                this.isedit = row.auditResult == 'AUDITRESULT02' ? true : false
                this.setAnswers(row.answer)
              })
              this.$message({
                showClose: true,
                message: response.data.msg || '成功',
                type: 'success'
              })
            } else {
              this.fullscreenLoading = false
              this.$message({
                showClose: true,
                message: '该题是最后一题！',
                type: 'warning'
              })
            }
            this.listLoading = false
          }).catch(error => {
            this.fullscreenLoading = false
            reject(error)
          })
          this.fullscreenLoading = false
        })
      } else if (val === 1) {
        if (this.classifyId === ''){
          this.$message({
            showClose: true,
            message: '请选择题库',
            type: 'warning'
          })
          return
        }
        this.fullscreenLoading = true
        params.auditResult = 'AUDITRESULT02'
        return new Promise((resolve, reject) => {
          review(params)
            .then(res => {
              this.$message.success('审核成功')
              this.fullscreenLoading = false
              this.getList()
              const query = {
                page: this.listQuery.page,
                pageSize: this.listQuery.limit,
                collectId: this.collectId,
                question: this.search.question
              }
              queryPage(query).then(response => {
                this.fullscreenLoading = false
                if (response.data.data.rows.length > 0) {
                  this.$message({
                    showClose: true,
                    message: '成功',
                    type: 'success'
                  })
                  this.$nextTick(() => {
                    const row = response.data.data.rows[0]
                    row.answerValue = JSON.parse(row.answer).answers ? JSON.parse(row.answer).answers.join('、') : ''
                    row.optsValue = JSON.parse(row.answer).opts ? JSON.parse(row.answer).opts.join(',').split(',') : ''
                    row.questionTypeValue = this.typeJudg(row.questionType)
                    this.baseform = row
                    this.clickTree['id'] = row.classifyId
                    this.clickTree['question'] = row.classifyName
                    this.isedit = row.auditResult == 'AUDITRESULT02' ? true : false
                    this.setAnswers(row.answer)
                  })
                } else {
                  this.$message({
                    showClose: true,
                    message: '审核通过',
                    type: 'success',
                    onClose: () => {
                      this.checkDialogVisible = false
                    }
                  })
                }
              }).catch(error => {
                this.fullscreenLoading = false
                reject(error)
              })
            })
            .catch(error => {
              reject(error)
            })
          this.fullscreenLoading = false
        })
      }
    },
    /*
    * 遮罩关闭
    * */
    closecheckDialogVisible() {
      this.skipPage = 2
    },
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: 'rgba(247,247,248,1)'
      }
    },
    handleSelectionChange(arr) {
      this.multipleSelection = arr
    },
    handleSelCfy() {
      this.qcDialogVisible = true
    },
    handleNodeClick(data, node) {
      this.clickTree = { id: data.id, question: data.classifyName }
      // this.classifyId = data.id
      this.classifyId = '3d0f0da25c564949a1a3e1a037df8fbe'
    },
    subQuesCfy() {
      if (this.clickTree.question) {
        this.qcDialogVisible = false
      } else {
        this.$message({
          showClose: true,
          message: '请选题库',
          type: 'warning'
        })
      }
    },
    // 加载题库
    loadTree(node, resolve) {
      this.treeloading = true
      getClassifyTree({ classifyType: 'JNZQFL03' }).then(res => {
        this.treeloading = false
        this.qctreedata = res.data.data
      }).catch( e => {
        this.treeloading = false
      })
    },
    /**
     * 获取当前树节点和其父级节点
     */
    getTreeNode(node) {
      if (node) {
        if (node.label !== undefined) {
          this.breadList.unshift(node.label) // 在数组头部添加元素
          this.getTreeNode(node.parent) // 递归
        }
      }
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 重置
    resettingBtn() {
      for (const i in this.listQuery) {
        this.listQuery['' + i + ''] = ''
      }
      this.listQuery.page = 1
      this.listQuery.limit = 10
      this.search.question = ''
      this.getList()
    },
    // 分配题库
    handleDistribution(row) {
      const arr = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(item => {
          arr.push(item)
        })
        // var ids = arr.join(',')
        this.tkfpDialogVisible = true
      } else {
        this.$message({
          message: '请选择需要分配的试题！',
          type: 'warning'
        })
      }
    },
    // 批量删除
    handleDeletes() {
      const arr = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach(item => {
          arr.push(item.id)
        })
        var ids = arr.join(',')
        this.handleDelete(ids)
      } else {
        this.$message({
          message: '请选择需要删除的数据！',
          type: 'warning'
        })
      }
    },
    // 删除
    handleDelete(ids) {
      this.$confirm('此操作将永久删除该试题/分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeList({ ids: ids }).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })
      }).catch(() => {
      })
    },
    // 题库分配提交
    tkfpSubmit() {
      this.tkfpDialogVisible = false
      this.clickTree = {}
    }

  }
}
</script>

<style lang="scss" type="text/scss">
$dark_gray: #bfced6;
$mainColor: #18a5fd;
.quescollect-detail {
  padding: 20px;

  .common-search {
    background-color: #fff;
    padding: 0 20px;

    .svg-container {
      padding: 0;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;

      &_login {
        font-size: 20px;
      }
    }

    .search-input {
      width: 60%;
      position: relative;

      &:after {
        content: "";
        position: absolute;
        left: -25px;
        right: 0;
        bottom: 8px;
        height: 1px;
        background: rgba(226, 227, 232, 1);
      }

      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;

        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }

    .common-search-btn {
      display: inline-block;
      float: right;

      .el-button.is-round {
        padding: 10px 30px;
        margin-right: 34px;
      }

      .common-search-more {
        font-size: 14px;
        font-weight: 500;
        color: $mainColor;
        cursor: pointer;
        margin-left: 10px;
      }
    }

    &.merge {
      height: 50px;
      line-height: 50px;
    }

    &.separate {
      .common-search-inner {
        padding-top: 10px;

        .search-inner-item {
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }

          .el-input {
            position: relative;

            &.el-date-editor .el-input__inner {
              padding-left: 30px;
            }

            .el-input__inner {
              border: none;
              padding: 0;
            }

            &:after {
              content: "";
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }

      .common-search-btn {
        text-align: center;
        display: block;
        float: none;
        height: 56px;
        line-height: 56px;
      }
    }
  }

  .btn-container {
    display: flex;
    height: 36px;
    line-height: 36px;
    margin-top: 20px;
    margin-bottom: 20px;

    .btn-title {
      flex: 1;
      font-size: 16px;
      font-weight: bold;
      font-family: PingFangSC-Medium;
      color: rgba(51, 51, 51, 1);
    }
  }

  .dataForm::-webkit-scrollbar {
    display: none;
  }

  .classify-con {
    .con-title {
    }

    .con-inner {
      height: 200px;
      overflow: auto;

      ul {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        list-style: none;

        li {
          margin-top: 10px;
          margin-right: 10px;
          padding: 5px 15px;
          border-radius: 15px;
          border: 1px solid #f5f5f5;
          cursor: pointer;

          &.active {
            color: #18a5fd;
            border-color: #18a5fd;
          }
        }
      }
    }
  }

  .quesClassify-data {
    display: inline-block;
    padding: 0 10px;
    background: rgba(246, 246, 246, 1);
    border-radius: 4px;
  }

  .quesClassify {
    display: inline-block;
    width: 120px;
    background: rgba(255, 255, 255, 1);
    border: 1px dotted $mainColor;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: $mainColor;
    text-align: center;
    cursor: pointer;
  }

  .classify-tree-con {
    max-height: 300px;
    overflow: auto;

    .custom-tree-node {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      width: 100%;

      .tree-node-txt {
        flex: 1;
      }
    }
  }

  .classify-tree-con::-webkit-scrollbar {
    display: none;
  }

  .answer-con {
    .el-textarea {
      margin-top: 20px;
    }
  }

  .check-con {
    .con-ques {
      .ques-title {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
      }
    }
  }

  .labelColor {
    .el-form-item .el-form-item__label {
      color: #18a5fd !important;
    }
  }

  .answerAndanalyze {
    margin-top: 20px;
  }
}
</style>
